<template>
	<view class="page">
		<global-contact></global-contact>
		<view class="search">
			<!-- 	<image style="width: 30rpx;height: 30rpx;" src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
			<view class="local" style="margin-right:10rpx;" @click="chooseCity()">
				<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
				<view class="trang"></view>
			</view> -->
			<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png" mode="aspectFit">
				<view class="searchin">
					<u-search @search="searchList()" placeholder="户外拓展/团建/骑行" :showAction="false"
						v-model="keyword"></u-search>
				</view>
			</image>
			<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
			<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png" mode="aspectFit">
			</image>
		</view>
		<view class="con">
			<view class="con-left">
				<scroll-view scroll-y="true" class="scroll1">
					<view :class="active === 'whole' ? 'active left-item' : 'left-item'" @click="handleStatus('whole')">
						全部产品</view>
					<view :class="active === 'hot' ? 'active left-item' : 'left-item'" @click="handleStatus('hot')">热门产品
						<image src="https://www.atuanjian.com/appletStatic/static/images/u-01.png" alt="" />
					</view>
					<view v-for="(item, index) in category" :key="item.id">
						<view :class="item.check ? 'active left-item' : 'left-item'" style="margin-top: 14rpx;"
							@click.stop="handleOpen(index)">
							{{ item.text }}
							<view class="down" :class="{ 'checked': item.check }"></view>
						</view>
						<view class="xi-list" v-if="item.check">
							<view v-for="(childs, i) in item.child" :key="childs.id" class="item"
								@click="handleXuan(index, i)"
								:style="{ 'color': childs.check ? '#FFB850' : '#797979' }">
								{{ childs.text }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="list" v-if="itemList.length > 0">
				<scroll-view scroll-y="true" class="scroll1">
					<view class="item" v-for="(item, index) in itemList" :key="index" @click="detail(item)">
						<view class="con-item">
							<view class="zhezhao"></view>
							<image :src="showImg + item.img" mode="scaleToFill"></image>
							<view class="look">
								<image src="https://www.atuanjian.com/appletStatic/static/images/u-02.png"
									mode="scaleToFill"></image>{{ item.hit ? item.hit : '0' }}
							</view>
							<view class="look share">
								<image src="https://www.atuanjian.com/appletStatic/static/images/u-03.png"
									mode="scaleToFill"></image>{{ item.share ? item.share : '0' }}
							</view>
							<view class="location">
								<image src="https://www.atuanjian.com/appletStatic/static/images/u-04.png"
									mode="scaleToFill"></image>{{ item.site ? item.site : '0' }}
							</view>
							<view class="location time">
								<image src="https://www.atuanjian.com/appletStatic/static/images/u-05.png"
									mode="scaleToFill"></image>{{ item.duration ? item.duration : '' }}
							</view>
						</view>
						<view class="word">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="list" v-else>
				<u-empty mode="data" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>


		<!-- <u-picker :show="showCity" :columns="cityList" @cancel="cancel1" @confirm="confirm1"></u-picker> -->
		<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
			@confirm="confirmSort"></u-picker>

	</view>
</template>

<script>
import {
	getselection,
	siteSetting,
	productType,
	meetingSelectionList,
	trainingSelectionList,
	activityReleaseSelectionList
} from '@/utils/request.js'
export default {
	data() {
		return {
			catid: '',
			page: 0,
			typeId: '',
			search: '',
			totalPage: 0,
			itemList: [],
			showImg: '',
			keyword: '',
			showCity: '',
			cityList: [],
			currentCity: uni.getStorageSync('webAddress'),
			title: '',
			sortList: [
				[{
					label: '默认排序',
					value: ''
				}, {
					label: '浏览量低到高',
					value: 'asc'
				}, {
					label: '浏览量高到低',
					value: 'desc'
				}]
			],
			showSort: false,
			priceSort: '',
			newUrl: '',
			uEmptyText: '数据加载中...',
			category: [],
			active: 'whole'
		}
	},
	methods: {
		handleOpen(index) {
			this.active = ''
			this.category[index].check = !this.category[index].check
			this.$forceUpdate()
		},
		handleXuan(index, i) {
			// 将其他子分类项的状态设为 false
			this.category.forEach((categoryItem) => {
				if (categoryItem.child && categoryItem.child.length > 0) {
					categoryItem.child.forEach((childItem) => {
						childItem.check = false;
					});
				}
			});
			this.category[index].child[i].check = true;
			this.typeId = this.category[index].child[i].id;
			this.page = 0
			this.itemList = []
			this.getList()
		},
		changeSort() {
			this.showSort = true

		},
		cancelSort() {
			this.showSort = false
		},
		confirmSort(e) {
			this.priceSort = e.value[0].value
			this.showSort = false
			this.page = 0
			this.itemList = []
			this.getList()
		},
		// 
		chooseCity() {
			this.showCity = true
		},
		cancel1() {
			this.showCity = false
		},
		confirm1(event) {
			uni.setStorageSync('webAddress', event.value[0])
			this.currentCity = event.value[0]
			this.showCity = false
			this.page = 0
			this.itemList = []
			this.getList()
		},
		// 
		searchList() {
			this.page = 0
			this.itemList = []
			this.getList()
		},
		filtrate() {
			this.keyword = ''
			// uni.setStorageSync('mark_id',this.catid)
			uni.navigateTo({
				url: '/pagesB/annualMeeting/filtrate?categoryId=' + this.catid
			})
		},
		async siteSetting() {
			return await siteSetting()
		},
		getSetting() {
			this.siteSetting().then(res => {
				uni.setStorageSync('webAddress', res.default_substation)
				// this.currentCity=res.default_substation
				if (res.city && res.city.length > 0) {
					this.cityList.push(res.city)
				}
				// this.defaultMethods()
			})
		},
		detail(item) {
			uni.navigateTo({
				url: `/pagesA/detail/selection?id=${item.id}&title=${this.title}`
			})
		},
		async getselection(data) {
			return await getselection(data)
		},
		async meetingSelectionList(data) {
			return await meetingSelectionList(data)
		},
		async trainingSelectionList(data) {
			return await trainingSelectionList(data)
		},
		async activityReleaseSelectionList(data) {
			return await activityReleaseSelectionList(data)
		},
		handleStatus(status) {
			this.active = status
			this.typeId = ''
			this.page = 0
			this.itemList = []
			this.category.forEach((item) => {
				item.check = false;
				if (item.child && item.child.length > 0) {
					item.child.forEach((child) => {
						child.check = false;
					});
				}
			});
			this.getList()
		},
		getList() {
			let data = {
				catid: this.catid,
				p: this.page,
				n: 15,
				typeId: this.typeId,
				search: this.keyword,
				sort: this.priceSort
			}
			let http = ''
			if (this.title === '团建项目') {
				http = this.getselection(data)
			} else if (this.title === '会议物料') {
				http = this.meetingSelectionList(data)
			} else if (this.title === '内训精选') {
				http = this.trainingSelectionList(data)
			} else if (this.title === '少年培训') {
				http = this.activityReleaseSelectionList(data)
			}
			http.then(res => {
				if (res.count < 1) {
					this.$data.uEmptyText = '暂无数据';
					return false;
				}
				if (res.list.length > 0) {
					this.totalPage = Math.ceil(res.count / 15)
					this.itemList = [...this.itemList, ...res.list]
				}
			})
		},
		async productType(data) {
			return await productType(data)
		},
		getClassification() {
			const data = {
				categoryId: this.catid
			}
			this.productType(data).then(res => {
				this.defaultList = JSON.parse(JSON.stringify(res.type))
				this.category = res.type
				if (this.category.length > 0 && this.category[0].applet_ui != 1) {
					this.type = 1
				}
				this.category.forEach(val => {
					Object.assign(val, {
						check: false
					})
					if (val.hasOwnProperty('child') && val.child && val.child.length > 0) {
						val.child.forEach(val2 => {
							Object.assign(val2, {
								check: false
							})
							if (val2.hasOwnProperty('child') && val2.child && val2.child
								.length > 0) {
								Object.assign(val, {
									hasThird: true
								})
								val2.child.forEach(val3 => {
									Object.assign(val3, {
										check: false
									})
								})
							} else {
								Object.assign(val, {
									hasThird: false
								})
							}
						})
					}
				})
			}).catch(err => {
				console.log(err)
			})
		},
	},
	onLoad(option) {
		this.showImg = this.$config.showImgApi;
		this.catid = option.id
		this.getSetting()
		if (option.title_text) {
			this.title = option.title_text
			uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
				title: option.title_text // 自定义标题内容
			})
		}
		this.getClassification()
	},
	onShow() {
		let option;
		// #ifdef H5
		option = this.options;
		// #endif
		// #ifdef MP-WEIXIN
		option = this.$mp.query;
		// #endif
		if (option && option.id && uni.getStorageSync(option.id)) {
			this.typeId = uni.getStorageSync(option.id);
			if (!option.typeId) {
				// #ifdef H5
				const newUrl = location.href + `&typeId=${this.typeId}`;
				history.pushState({}, null, newUrl);
				// #endif
				// #ifdef MP-WEIXIN
				const newUrl = this.$mp.page.$page.fullPath + `&typeId=${this.typeId}`;
				this.newUrl = newUrl;
				// #endif
			} else {
				// #ifdef H5
				const includeQuestion = location.href.includes('?');
				let url = includeQuestion ? location.href.split('?')[0] : location.href;
				const newUrl = url + `?id=${option.id}&typeId=${this.typeId}`;
				history.pushState({}, null, newUrl);
				// #endif
			}
			uni.removeStorageSync(option.id);
		} else if (option && option.typeId) {
			this.typeId = option.typeId;
		}
		this.page = 0
		this.itemList = [];
		this.getList();
		// if(uni.getStorageSync('goods')){
		// 	// this.keyword=JSON.parse(uni.getStorageSync('goods'))[0]
		// 	let arr=JSON.parse(uni.getStorageSync('goods'))
		// 	// typeId
		// 	let arrid=[]
		// 	arr.forEach(val=>{
		// 		arrid.push(val.id)
		// 	})
		// 	this.typeId=arrid.join(',')

		// 	this.page=0
		// 	this.itemList=[]
		// 	this.getList()
		// 	uni.removeStorageSync('goods')
		// }
	},
	onReachBottom() {
		if (this.page < this.totalPage - 1) {
			this.page++
			this.getList()
		}
	},
	onShareAppMessage() {
		return {
			title: '西安蚂蚁团建',
			path: this.newUrl
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #F2F2F2;

	.scroll1 {
		height: 90vh; // vh+
	}
}

.list {
	flex: 1;

	.item {
		margin-bottom: 40rpx;
		width: 534rpx;

		.con-item {
			position: relative;
			height: 269rpx;
			border-radius: 12px;
			overflow: hidden;

			.zhezhao {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				// background: rgba(0, 0, 0, 0.5);
				z-index: 1;
			}

			.look {
				width: 100rpx;
				overflow: hidden;
				position: absolute;
				top: 20rpx;
				right: 120rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				z-index: 9;
				display: flex;
				align-items: center;

				image {
					margin-right: 10rpx;
					width: 28rpx;
					height: 18rpx;
				}
			}

			.location {
				min-width: 100rpx;
				overflow: hidden;
				position: absolute;
				bottom: 20rpx;
				left: 10px;
				font-size: 20rpx;
				color: #FFFFFF;
				z-index: 9;
				display: flex;
				align-items: center;

				image {
					margin-right: 10rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}

			.time {
				bottom: 20rpx;
				left: 90px;
			}

			.share {
				top: 20rpx;
				right: 0rpx;
				z-index: 9;
			}

			.word {
				background-color: #FFFFFF;
				text-indent: 0.5em;
				font-size: 26rpx;
				padding: 10px 0;
			}
		}
	}
}

.search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 20rpx;
	background-color: #FFB850;
	padding-bottom: 10rpx;

	.searchin {
		width: 90%;
	}

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.local {
	@include flex_style(flex-start, center, row nowrap);

	text {
		display: block;
		max-width: 85rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: 苹方-简;
		font-weight: normal;
		line-height: 38rpx;
		color: #FFFFFF;
	}

	.trang {
		width: 0;
		height: 0;
		border-left: 7rpx solid transparent;
		border-right: 7rpx solid transparent;
		border-top: 10rpx solid #FFFFFF;
		margin-left: 8rpx;
	}
}

.con {
	display: flex;
	margin-top: 24rpx;

	.con-left {
		margin-right: 16rpx;
		width: 180rpx;

		.active {
			background: #FFB850 !important;
			color: #fff;
		}

		.left-item {
			height: 77rpx;
			background: #FFFFFF;
			line-height: 77rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;

			image {
				width: 32rpx;
				height: 37rpx;
				margin-left: 4rpx;
			}

			.down {
				width: 0;
				height: 0;
				border: 12rpx solid transparent;
				margin-left: 20rpx;
				margin-top: 12rpx;
				border-top: 12rpx solid #797979;
			}

			.checked {
				margin-top: -12rpx;
				border-top: 12rpx solid #fff;
				transform: rotate(180deg);
			}
		}
	}
}

.xi-list {
	background-color: #fff;

	.item {
		padding: 16rpx 0;
		text-align: center;
		font-size: 22rpx;
		margin-top: 10rpx;
	}
}
</style>